<template>
  <div id="container">
    <!-----------------------------
                  轮播图
    ------------------------------->
    <div class="swiper">
      <!--      <span class="demonstration">默认 Hover 指示器触发</span>-->
      <el-carousel height="500px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-----------------------------
                  展示图
    ------------------------------->
    <div class="dalao-data">
      <el-row :gutter="10">
        <!-- swiper -->
        <el-col :xs="0" :md="2" :lg="2" :xl="1">
          <div class="grid-content"></div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4" :xl="4">
          <div class="grid-content ">
            <div class="reward-data">
              <img src="../../static/images/index/u26.png" />
              <h3>这是标题</h3>
              <p>这是文本这是文本这是文本这是文本这是文本这是文本这是文本</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4" :xl="4">
          <div class="grid-content ">
            <div class="reward-data">
              <img src="../../static/images/index/u26.png" height="80" width="120"/>
              <h3>这是标题</h3>
              <p>这是文本这是文本这是文本这是文本这是文本这是文本这是文本</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4" :xl="4">
          <div class="grid-content ">
            <div class="reward-data">
              <img src="../../static/images/index/u26.png" height="80" width="120"/>
              <h3>这是标题</h3>
              <p>这是文本这是文本这是文本这是文本这是文本这是文本这是文本</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4" :xl="4">
          <div class="grid-content  ">
            <div class="reward-data">
              <img src="../../static/images/index/u26.png" height="80" width="120"/>
              <h3>这是标题</h3>
              <p>这是文本这是文本这是文本这是文本这是文本这是文本这是文本</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="0" :sm="24" :md="6" :lg="6" :xl="6">
          <div class="grid-content">
            <div class="show-usernum">
              <div class="show-usernum-group">
                <span class="num">{{22222}}</span>
                <span class="nickname">用户</span>
              </div>
              <div class="show-usernum-group">
                <span class="num">{{22}}</span>
                <span class="nickname">开发者</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-----------------------------
                学习体系介绍
    ------------------------------->
    <div class="learnsystem"  >
      <el-row>
        <el-col :xs="24" :sm="24">
          <div class="system-content-title">
            <h1>学习体系介绍</h1>
            <div class="block-line"></div>
          </div>
        </el-col>
        <el-col :xs="0" :sm="2" :md="2" :lg="2" :xl="2"><div class="grid-content "></div></el-col>
        <el-col :xs="4.8" :sm="4" :md="4" :lg="4" :xl="4"><div class="grid-content ">
          <div class="system-content-group">
            <div class="course-show">
              <div class="course-show-user">
                <img src="../../static/images/index/u45.png" height="31" width="26"><span>2333</span>
              </div>
              <h2>Java全栈开发</h2>
              <p>
                呵呵
              </p>
            </div>
            <div class="course-details">
              <span>点击查看详情</span>
            </div>
          </div>
        </div></el-col>
        <el-col :xs="4.8" :sm="4" :md="4" :lg="4" :xl="4"><div class="grid-content ">
          <div class="system-content-group">
            <div class="course-show">
              <div class="course-show-user">
                <img src="../../static/images/index/u45.png" height="31" width="26"><span>2333</span>
              </div>
              <h2>前端工程师</h2>
              <p>
                老子无所不能
              </p>
            </div>
            <div class="course-details">
              <span>点击查看详情</span>
            </div>
          </div>
        </div></el-col>
        <el-col :xs="4.8" :sm="4" :md="4" :lg="4" :xl="4"><div class="grid-content ">
          <div class="system-content-group">
            <div class="course-show">
              <div class="course-show-user">
                <img src="../../static/images/index/u45.png" height="31" width="26"><span>2333</span>
              </div>
              <h2>Python工程师</h2>
              <p>
                我才是天下第一
              </p>
            </div>
            <div class="course-details">
              <span>敬请期待</span>
            </div>
          </div>
        </div></el-col>
        <el-col :xs="4.8" :sm="4" :md="4" :lg="4" :xl="4"><div class="grid-content ">
          <div class="system-content-group">
            <div class="course-show">
              <div class="course-show-user">
                <img src="../../static/images/index/u45.png" height="31" width="26"><span>2333</span>
              </div>
              <h2>PHP工程师</h2>
              <p>
                PHP天下第一
              </p>
            </div>
            <div class="course-details">
              <span>敬请期待</span>
            </div>
          </div>
        </div></el-col>
        <el-col :xs="4.8" :sm="4" :md="4" :lg="4" :xl="4"><div class="grid-content ">
          <div class="system-content-group">
            <div class="course-show">
              <div class="course-show-user">
                <img src="../../static/images/index/u45.png" height="31" width="26"><span>2333</span>
              </div>
              <h2>计算机基础</h2>
              <p>
                少年渴望力量吗?
              </p>
            </div>
            <div class="course-details">
              <span>敬请期待</span>
            </div>
          </div>
        </div></el-col>
        <el-col :xs="0" :sm="2" :md="2" :lg="2" :xl="2"><div class="grid-content "></div></el-col>
      </el-row>

    </div>
    <!-----------------------------
            dalao心得
    ------------------------------->
    <div class="master-get">
      <el-row>
        <el-col :xs="24" :sm="24">
          <div class="system-content-title">
            <h1>dalao心得</h1>
            <div class="block-line"></div>
          </div>
        </el-col>
        <el-col :xs="0" :sm="2"><div class="grid-content "></div></el-col>
        <el-col :xs="12" :sm="5"><div class="grid-content ">
          <div class="master-get-group">
            <img src="../../static/images/index/u88.png" />
            <div>
              <div class="master-get-group-2">
                <h3>[JAVA] SpringBoot入门</h3>
                <p>内容:如何学习SpringBoot.....</p>
                <p class="author">大佬:Bug 摸鱼</p>
              </div>

            </div>
          </div>
        </div></el-col>
        <el-col :xs="12" :sm="5"><div class="grid-content ">
          <div class="master-get-group">
            <img src="../../static/images/index/u88.png" />
            <div>
              <h3>[JAVA] SpringBoot入门</h3>
              <p>内容:如何学习SpringBoot.....</p>
              <p class="author">大佬:Bug 摸鱼</p>
            </div>
          </div>
        </div></el-col>
        <el-col :xs="12" :sm="5"><div class="grid-content ">
          <div class="master-get-group">
            <img src="../../static/images/index/u88.png" />
            <div>
              <h3>[JAVA] SpringBoot入门</h3>
              <p>内容:如何学习SpringBoot.....</p>
              <p class="author"> 大佬:Bug 摸鱼</p>
            </div>
          </div>
        </div></el-col>
        <el-col :xs="12" :sm="5"><div class="grid-content ">
          <div >
<!--            <img src="../../static/images/index/u88.png" />-->
            <div class="master-get-more">
              <h3>更多心得敬请期待.......</h3>
<!--              <p>内容:如何学习SpringBoot.....</p>-->
<!--              <p class="author">大佬:Bug 摸鱼</p>-->
            </div>
          </div>
        </div></el-col>
        <el-col :xs="0" :sm="2"><div class="grid-content "></div></el-col>
      </el-row>
    </div>
    <!-----------------------------
        模式介绍
------------------------------->
  <div class="mode">
    <el-row>
      <el-col :xs="24" :sm="24">
        <div class="system-content-title">
          <h1>模式介绍</h1>
          <div class="block-line"></div>
        </div>
      </el-col>
      <el-col :xs="0" :sm="2"><div class="grid-content ">

      </div></el-col>
      <el-col :xs="24" :sm="5"><div class="grid-content ">
        <div class="mode-block">
            <h3>实战编码</h3>
          <p>程序员怎么能不敲代码呢</p>
        </div>
      </div>
      </el-col>
      <el-col :xs="24" :sm="5"><div class="grid-content ">
        <div class="mode-block">
          <h3>理论体系</h3>
          <p>能唬住面试官才有工资</p>
        </div>
      </div></el-col>
      <el-col :xs="24" :sm="5"><div class="grid-content ">
        <div class="mode-block">
          <h3>职业素养</h3>
          <p>用Table和空格的不是一路人</p>
        </div>
      </div></el-col>
      <el-col :xs="24" :sm="5"><div class="grid-content ">
        <div class="mode-block">
          <h3>快速入门</h3>
          <p>从入门到入坟只要7天</p>
        </div>
      </div>
      </el-col>
      <el-col :xs="0" :sm="2"><div class="grid-content "></div></el-col>
    </el-row>
  </div>
    <!-----------------------------
            流程一览
------------------------------->
    <div class="master-get">
      <el-row>
        <el-col :xs="24" :sm="24">
          <div class="system-content-title">
            <h1>流程一览</h1>
            <div class="block-line"></div>
          </div>
        </el-col>
        <el-col :xs="0" :sm="2"><div class="grid-content ">

        </div></el-col>
        <el-col :xs="12" :sm="5"><div class="grid-content ">
          <div class="process">
            <h3>领取资料</h3>
            <img src="../../static/images/index/u117.png" height="50" width="50"/>
          </div>
        </div></el-col>
        <el-col :xs="12" :sm="5"><div class="grid-content ">
          <div class="process">
            <h3>领取资料</h3>
            <img src="../../static/images/index/u117.png" height="50" width="50"/>
          </div>
        </div></el-col>
        <el-col :xs="12" :sm="5"><div class="grid-content ">
          <div class="process">
            <h3>领取资料</h3>
            <img src="../../static/images/index/u117.png" height="50" width="50"/>
          </div>
        </div></el-col>
        <el-col :xs="12" :sm="5"><div class="grid-content ">
          <div class="process">
            <h3>领取资料</h3>
            <img src="../../static/images/index/u117.png" height="50" width="50"/>
          </div>
        </div></el-col>
        <el-col :xs="0" :sm="2"><div class="grid-content "></div></el-col>

          <el-col :xs="0" :sm="6"><div class="grid-content "></div></el-col>
          <el-col :xs="8" :sm="4"><div class="grid-content ">
            <div class="process">
              <h3>领取资料</h3>
            </div>
          </div></el-col>
        <el-col :xs="8" :sm="4"><div class="grid-content ">
            <div class="process-1 arrow">
            <h3 >            <img src="../../static/images/index/u117.png" height="50vw" width="50vw"/>
            </h3>
          </div>
        </div></el-col>
          <el-col :xs="8" :sm="4"><div class="grid-content ">
            <div class="process">
              <h3>领取资料</h3>
            </div>
          </div></el-col>
          <el-col :xs="0" :sm="6"><div class="grid-content "></div></el-col>

      </el-row>
    </div>
    <!-----------------------------
                用户访问量
    ------------------------------->
    <div class="users">
      <el-row>
        <el-col :xs="24" :sm="24">
          <div class="grid-content">
            <span>您是第{{222}}位访问本站的用户</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <moreA/>

  </div>
</template>
<script>
export default {
  data(){
    return{
      mytest1:'',
    }
  },
  created() {
    this.$axios.get(`https://itfun.tv/api/v1/home.json`).then(res=>{
      console.log(res)
      // this.data.abc="111";
    })
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.swiper {
  position: relative;
}
.swiper-text {
  position: absolute;
  z-index: 20;
  padding: 100px;
  bottom: 0;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.dalao-data {
  padding: 50px 10px;
  background-color: #EFEFEF;
}
.reward-data {
  /*height: 20vh;*/
  margin: 5px 0;
  border-radius: 4px;
  img{
    height: 110px;
    width: 150px;
    border-radius: 4px;
    display: block;
    margin: 0  auto;
    /*padding: 3vh 0;*/
    /*margin: 0 auto;*/
  }
  h3{
    text-align: center;
    padding-top: 10px;
  }
  p{
    padding: 10px;
    text-align: center;
    font-size: 13px;
    color: #c4c4c4;
  }
}
.course-show:hover {
  animation: box 1s ease 0s;
  animation-fill-mode: forwards;

}
@-webkit-keyframes box {
  0% {
    // box-shadow: 0;
  }
  50% {
    box-shadow: 0 1px 20px #616161;
    transform: scale(1.005);
  }
  100% {
    box-shadow: 0 1px 20px #616161;
    transform: scale(1.005);
  }
}
.users {
  font-size: 12px;
  line-height: 36px;
  font-weight: 500;
  text-align: center;
}
.show-usernum{
  display: flex;
  flex-direction: column;
  // align-items: baseline;
  text-align: center;
  // justify-content: space-evenly
  span{
    display: block;
  }
}
.num{
  font-size: 40px;
  font-weight: 500;
  color: #2ec54c;
}
.nickname{
  font-size: 14px;
  font-weight: 300;
}
.show-usernum-group{
  margin-top: 15px;
}
  .system-content-title{
    margin: 50px 0 20px;
    text-align: center;
  }
  .block-line{
    height: 3px;
    width: 100px;
    background-color: #666666;
    margin: 0 auto;
  }
  .course-show{
    background-color: #52b4ff;
    padding: 10px;
    border-radius:5px;
    margin: 10px;
    h2{
      text-align: center;
      padding: 6vw 0 2vw;
      color: #ffffff;
      font-size: 2.2vw;
    }
    p{
      font-size: .6vw;
      /*margin: 0 10px;*/
      padding: 0 1vw;
      text-align: center;
      margin-bottom: 3vw;

    }
  }
  .course-show-user{
    /*margin: 10px;*/
    display: flex;
    align-items: center;
    span{
      font-size: 1.2vw;
      padding-left: 10px;
    }
  }
  .course-details{
    cursor: pointer;
    border: 1px solid;
    margin: 20px 12px;
    span{
      font-size: 1vw;
      display: block;
      text-align: center;
      margin: 20px ;
    }
  }
.course-details:hover{
  color: #108de9;
}
.master-get{
  background-color: #efefef;
}
  .master-get-group{
    background-color: #ffffff;
    width: 75%;
    height: 45vh;
    margin: 10px auto 50px;
    position: relative;
    img {
      width: 100%;
    }
    h3{
      text-align: center;
      margin: 2vh;
    }
    p{
      text-align: center;
    }
  }
  .author{
    position: absolute;
    margin: 1vh;
    bottom: 2vh;
    left: calc(50% - 60px);
  }
.master-get-more{
  width: 75%;
  margin: 20vh auto;
  text-align: center;
}
.master-get-more>h3:hover{
    cursor: pointer;
    color: #108de9;
    text-decoration:underline #108de9;
}
.master-get-group-2{

  }
  .mode-block{
    /*height: ;*/
    /*margin-bottom: 20px;*/
    width: 95%;
    margin: 5px auto 40px;
    border: 1px solid #f5f5f5;
    text-align: center;
    box-shadow: 5px 2px 5px #8f949a;
    border-radius: 3px;
    h3{
      padding: 50px 0;
      font-size: 25px;
    }
    p{
      white-space: normal;
      margin-bottom: 50px;
      padding: 10px;
    }
  }
  .process-1{
    margin: 20px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    h3{
      font-size: 1vw;
      padding: 30px 50px;
    }
  }
  .process{
    margin: 20px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
      h3{
        border: 1px solid;
        background-color: #ffffff;
        font-size: 2vw;
        padding: 40px 50px;
      }
    img{

    }
  }
  .arrow{
  }
</style>
